<template>
  <div style="display: flex;flex-direction: column;align-items: center">
    <div style="margin: 40px 0"><h1>健康知识管理</h1></div>
    <el-card style="width: 80%">
      <div>
        <el-radio-group style="margin-bottom: 20px" v-model="documentType">
          <el-radio-button label="已发布"></el-radio-button>
          <el-radio-button label="草稿箱"></el-radio-button>
        </el-radio-group>
      </div>
      <div style="width: 100%;display: flex;flex-direction: row;justify-content: space-around;margin-bottom: 20px">
        <div>
          <el-input placeholder="根据作者筛选" v-model="searchData.clauses[1].value" @blur="initData">
            <template slot="append">
              <el-button icon="el-icon-search" type="info" @click="initData"></el-button>
            </template>
          </el-input>
        </div>
        <div>
          <el-input placeholder="根据书名筛选" v-model="searchData.clauses[2].value" @blur="initData">
            <template slot="append">
              <el-button icon="el-icon-search" @click="initData"></el-button>
            </template>
          </el-input>
        </div>
        <div>
          <el-input placeholder="根据内容筛选" v-model="searchData.clauses[3].value" @blur="initData">
            <template slot="append">
              <el-button icon="el-icon-search" @click="initData"></el-button>
            </template>
          </el-input>
        </div>
        <el-button type="primary" icon="el-icon-plus" @click="addBook">添加新文章</el-button>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px">
        <el-table-column
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            prop="publishData"
            label="创建日期"
            width="150">
        </el-table-column>
        <el-table-column
            prop="book"
            label="书名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="author"
            align="center"
            label="作者"
            width="150">
        </el-table-column>
        <el-table-column
            prop="visitNum"
            align="center"
            label="阅读量"
            width="80">
        </el-table-column>
        <el-table-column
            prop="description"
            label="简介"
            align="center">
        </el-table-column>
        <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="220">
          <template slot-scope="scope">
            <el-button
                @click.native.prevent="showBook(scope.$index, tableData)"
                size="small">
              阅读
            </el-button>
            <el-button
                @click.native.prevent="editBook(scope.$index, tableData)"
                size="small">
              编辑
            </el-button>
            <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div style="text-align: center">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchData.pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="searchData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchData.total">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
        :title="title"
        width="70%"
        :modal="false"
        :before-close="handleClose"
        :visible.sync="dialogVisible">
      <el-form :model="bookData" label-width="10%" label-position="left" style="padding: 10px 60px">
        <el-form-item label="文章名">
          <el-input v-model="bookData.book"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="bookData.author" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="阅读量">
          <el-input-number v-model="bookData.visitNum"></el-input-number>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="bookData.description"></el-input>
        </el-form-item>
        <el-form-item label="正文" style="height: 300px">
          <quill-editor style="height: 200px" v-model="bookData.content">
          </quill-editor>
        </el-form-item>
        <template>
          <el-form-item>
            <el-button type="danger" @click="submitData(bookData,'save')">保存到草稿箱</el-button>
            <el-button type="success" @click="submitData(bookData,'publish')">发布</el-button>
            <el-button @click="handleClose">取消</el-button>
          </el-form-item>
        </template>

      </el-form>
    </el-dialog>
    <el-dialog title="阅读健康知识"
               width="70%"
               :modal="false"
               :before-close="handleBookClose"
               :visible.sync="bookVisible">
      <book-read :book-data="bookData"></book-read>
    </el-dialog>
  </div>
</template>

<script>
import BookRead from './BookRead'
import Message from '../../components/messages/index.js'

export default {
  name: "Index",
  data() {
    return {
      title: "添加健康知识",
      dialogVisible: false,
      bookVisible: false,
      bookData: {
        publishData: "",
        author: "",
        book: "",
        visitNum: 0,
        description: "",
        content: "",
        isPublished: 1
      },
      tableData: [],
      searchData: {
        pageSize: 5,
        pageNum: 1,
        total: 0,
        clauses: [{
          column: "isPublished",
          operation: "=",
          value: 1
        }, {
          column: "author",
          operation: "like",
          value: ""
        }, {
          column: "book",
          operation: "like",
          value: ""
        }, {
          column: "content",
          operation: "like",
          value: ""
        }]
      },
      documentType: "已发布"
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.bookData = {};
    },
    handleBookClose() {
      this.bookVisible = false;
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.initData();
    },
    initData() {
      this.$http.post("/healthDocument/page", this.searchData).then(res => {
        if (res.status === 200) {
          console.log(res)
          this.tableData = res.data.records;
          this.searchData.total = res.data.total;
        }
      })
    },
    //打开添加文章弹窗
    addBook() {
      this.title = "添加健康知识";
      this.dialogVisible = true;
      this.bookData = {};

    },
    editBook(index, data) {
      this.title = "修改健康知识";
      this.$http.get("/healthDocument/get/" + data[index].id).then(res => {
        if (res.status === 200) {
          this.bookData = res.data;
        }
      });
      this.dialogVisible = true;

    },
    //提交添加的文章
    submitData(data, type) {
      if (type === 'save') {
        data.isPublished = 0;
      } else {
        data.isPublished = 1;
      }
      if (data.id == null || data.id === "") {
        this.$http.post("/healthDocument/add", data).then(res => {
          if (res.status === 200) {
            Message.success("操作成功");
            this.initData();
          }
        })
      } else {
        this.$http.post("/healthDocument/update", data).then(res => {
          if (res.status === 200) {
            Message.success("操作成功");
            this.initData();
          }
        })
      }
      this.dialogVisible = false;
    },
    showBook(index, data) {

      this.bookVisible = true;

      this.$http.get("/healthDocument/view/"+data[index].id).then(res => {
        this.bookData = res.data;
        console.log("增加阅读数据",res);

      })

    },
    deleteRow(index, data) {
      Message.confirm("是否需要删除该文章？").then(() => {
        this.$http.get("/healthDocument/delete/" + data[index].id).then(res => {
          if (res.status === 200) {
            Message.success("操作成功");
            this.initData();
          }
        })
      })
    }
  },
  components: {
    BookRead
  },
  mounted() {
    this.initData()
  },
  watch: {
    "documentType": function (val) {
      if (val === '已发布') {
        this.searchData.clauses[0].value = 1;
        this.initData();
      }
      if (val === '草稿箱') {
        this.searchData.clauses[0].value = 0;
        this.initData();
      }
    }
  }
}
</script>

<style scoped>

</style>
